<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-03 14:44:55
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-03 15:14:06
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="http://p7.itc.cn/q_70/images01/20210618/f5f727d4e52f410ba85d9893fa76714e.jpeg" alt="test" aaa="world">
    <p id="con" test="qfedu" data-id="666" data-name="zhangsan">asdfasdf</p>
    <input type="text" disabled>
    <script>
        // 属性是写在标签里边的 用来修饰标签  
        // 属性= 值 

        // 属性也有分类  
        // 原生属性 
        // 符合w3c 标准 
        // class id style type 

        //自定义属性  
        // 对标签并没有意义  
        // 帮助程序员记录一些信息  
        // checked  selected disabled

        // H5 自定义属性 
        // 以 data- 开头 后边写上自己定义的名字  
        // 方便程序员用来区分  
        // 每个元素都天生自带一个属性 叫dataset  
        // 它是个对象 
        // 对象里边就有属性 
        // 所有data-开头的属性 都在对象里边 


        // 操作属性  
        // 读(查) 写 (增删改)

        // 原声属性支持读写  


        // 读  
        // 元素.属性 => 得到的就是 属性对应的值  


        // 写
        // 元素.属性 = 新值 
        // alert(document.getElementsByTagName('img')[0].alt)
        // document.getElementsByTagName('img')[0].alt = 'kangbazi';
        // alert(document.getElementsByTagName('img')[0].alt)

        // alert(document.getElementsByTagName('img')[0].hello) 
        // 这种方式拿不到自定义的属性  undefined

        // 自定义属性的读写  
        // setAttribute getAttribute removeAttribute 
        // 既能够操作 原生属性 又能操作自定义属性 
        // 增 
        // document.getElementsByTagName('img')[0].setAttribute('h5','999');

        // // 查
        // alert(document.getElementsByTagName('img')[0].src);
        // alert(document.getElementsByTagName('img')[0].getAttribute('aaa'));
        // alert(document.getElementsByTagName('img')[0].getAttribute('src'));
        // // 删 
        // document.getElementsByTagName('img')[0].removeAttribute('aaa')



        // h5 自定义属性  
        // <p id="con" test="qfedu" data-id="666" data-name="zhangsan">asdfasdf</p>

        // pele = document.querySelector('p');
        // // alert(pele.dataset.id);
        // // alert(pele.dataset.name);

        // pele.dataset.age = 18; //data-age="18"
        // //<p id="con" test="qfedu" data-id="666" data-name="zhangsan" data-age="18">asdfasdf</p>
        // delete pele.dataset.id


        /// 原生属性  特殊的几个属性  checked disabled selected 
        // 读取拿到布尔类型
        // 写 也是给布尔类型 
        inputele = document.querySelector('input');
        // alert(inputele.disabled) // 原声属性  元素.属性  true
        inputele.disabled = false

    </script>
</body>
</html>